<template>
	<view class="tabs">
		<view v-for="item, index in list" :key="index" @click="value = index">
			<view :class="{ 'active': index == value }">
				<slot :item="item">
					{{ item }}
				</slot>
			</view>
			<view class="line" v-if="index == value">
				<image src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/title-underline.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from "vue";
const emit = defineEmits(['update:current', 'change']);
const props = defineProps({
	list: {
		type: Array||Object,
		default: () => ([])
	},
	current: {
		type: Number,
		default: 0
	}
})
const value = computed({
	get: () => {
		return props.current;
	},
	set: (val) => {
		emit('update:current', Number(val));
		emit('change', Number(val))
	}
})
</script>

<style lang="scss" scoped>
.tabs {
	margin-top: 32rpx;
	display: flex;
	gap: 32rpx;

	view {
		font-size: 28rpx;
		color: #86909C;
	}

	.active {
		color: $uni-color-primary;
	}

	.line {
		display: flex;
		justify-content: center;
		image {
			width: 48rpx;
			height: 16rpx;
			margin-top: 6rpx;
		}
	}
}
</style>